<template>
   <div class="home">
     <h-swiper></h-swiper>
     <!-- 系统消息 -->
     <div class='noticetitle'>
       <i></i>
       <div>
         <swiper class='notice':autoplay="true" :circular="true" :vertical="true" interval="2000">
           <swiper-item class="noticeSlide" v-for='(text,i) in noticeText' :key="i" :data-msgid='text.id' @click="isLogin">
             {{text.name}}
           </swiper-item>
         </swiper>
       </div>
     </div>
     <!-- 首页tab -->
     <div class='recommended'>
       <div class='wapper' @click='toquestion'>
         <div class='recommended-img'><img src="../../../static/assets/xszn.png"></div>
         <div class='recommended-text'>资质证明</div>
       </div>
       <div class='wapper' @click='tosafe'>
         <div class='recommended-img'><img src="../../../static/assets/safe.png"></div>
         <div class='recommended-text'>安全保障</div>
       </div>
       <div class='wapper' @click='tomsg'>
         <div class='recommended-img'><img src="../../../static/assets/infocenter.png"><i></i></div>
         <div class='recommended-text'>消息中心</div>
       </div>
       <div class='wapper' @click='tobankManagement'>
         <div class='recommended-img'><img src="../../../static/assets/cgzl.png"></div>
         <div class='recommended-text'>存管专栏</div>
       </div>
     </div>
     <div class='VIP' @click="todetail" v-show='VIPFlag'>
       <div class='wapper'>
         <div class='VIPtitle'>
           <span>{{VIP.borrowName}}</span>
           <i class='VIPshow' v-show='VIP.type==3'></i>
         </div>
         <div class="VIPInfo">
           <div class='VIPperce'>
             <div>
               <label>{{VIP.apr}}</label><span>%</span>
             </div>
             <i v-show="VIP.israiserates==1">+{{VIP.raiserates}}%</i>
             <span class="txt">预期年化率</span>
           </div>
           <div class='VIPnotice'>
             <span class="sp-3">剩余可投{{VIP.avaiableAccount}}元</span>
             <span class="sp-1">期限{{VIP.validTime}}{{VIP.isDay==1?'天':'月'}}</span>
             <span class="sp-2">{{VIP.lowestAccount}}元起投</span>
           </div>
         </div>
         <div class='VIPbtn'>
           <div>立即投资</div>
         </div>
       </div>
     </div>
     <!--广告位-->
     <div class="advertising" @click='tofriend'>
       <img src="../../../static/assets/youqing.png" alt="邀请好友拿现金" title="邀请好友拿现金">
     </div>
     <!-- 底部介绍 -->
     <div class='biaoContent'>
       <div class='fang'>
         <i></i>
         <div>
           <div>国企全资</div>
         </div>
       </div>
       <div class='cir'>
         <i></i>
         <div>
           <div>资产担保</div>
         </div>
       </div>
       <div class='ju'>
         <i></i>
         <div>
           <div>晋商银行存管</div>
         </div>
       </div>
     </div>
     <div class="phone" @click='totanchuang'></div>
     <div class="tanchuang" v-show="dialFlag">
       <div class="close" @click='toclose'>取消</div>
       <div class="dial" @click='todial'>拨打</div>
     </div>
     <!--弹窗popUpFlag-->
     <div class="popUpWarp" v-show="popUpFlag">
       <div class="popUpLayer">
         <img src="../../../static/assets/homeWindow.png" />
         <a class="btn" @click="topopUp">立即领取</a>
         <div @click="closepopUp"><img src="../../../static/assets/colseHomeWindow.png" /></div>
       </div>
     </div>
  </div>
</template>

<script>
    import swiper from "@/components/swiper/swiper";
    import ajax from '@/utils/ajax'
    import toast from 'mptoast'
export default {
    data() {
        return {
          noticeText: [],
          biao: [],
          VIPFlag: true,
          dialFlag:false,
          VIP: {
            borrowId: '',
            borrowName: '',
            apr: '',
            lowestAccount: '',
            validTime: '',
            percent: '',
            repaymentType: '', //还款方式，目前没有用到
            type: -1,
            activityName:'',
            isActivity:'',
            israiserates:'',
            raiserates:'',
            avaiableAccount:0
          },
          recommendFlag: true,
          popUpFlag:false,
        }
    },
    onLoad() {

    },
    components: {
      "h-swiper": swiper
    },
    methods: {
      tomsg: function() {
        let $this = this
        wx.getStorage({
          key: 'isLogin',
          success: function(res) {
            console.log(res.data)
            $this.$router.push('/pages/home/msg')
          },
          fail(res){
            wx.showToast({
              title: '请先登录',
              icon: 'none',
              duration: 2000
            })
            $this.$router.push('/login')
          }
        })
      },
      tosafe: function() {
        this.$router.push('/pages/home/safe')
      },
      tobankManagement: function() {
        this.$router.push('/pages/home/cgzl')
      },
      toquestion: function() {
        this.$router.push('/pages/home/zzzm')
      },
      bannerlink: function(bannerid,bannerurl){
        if(bannerid==265){
          if (!sessionStorage.getItem('isLogin')) {
            Toast('请先登录')
            this.$router.push('/login')
            return false
          }
          this.$router.push({
            path: '/friend',
            query: {
              m: sessionStorage.getItem('account')
            }
          })
        }else{
          if(bannerurl){
            window.location.href = bannerurl;
          }
        }
      },
      tofriend: function() {
        if (!sessionStorage.getItem('isLogin')) {
          Toast('请先登录')
          this.$router.push('/login')
          return false
        }
        this.$router.push({
          path: '/friend1',
          query: {
            m: sessionStorage.getItem('account')
          }
        })
      },

      todetail(){
        this.$router.push({
          path: '/pages/detail/detail',
          query: {
            id: this.VIP.borrowId
          }
        })
      },
      isLogin(){
        if (!sessionStorage.getItem('isLogin')) {
          wx.showToast({
            title: '请先登录',
            icon: 'none',
            duration: 2000
          })
          $this.$router.push('/login')
          return false
        }
        $this.$router.push('/msgdetail' + $(this).data('msgid'))
      }
    },
    mounted(){
      let $this = this
      ajax.request('/wap/invest_total.html','',function (res) {
        if (res.code == 0) {
          for (let i of res.data) {
            $this.noticeText.push(i)
          }
        }
      })
      /*首页新手推荐标*/

      ajax.request('/wap/novice_borrow.html',{}, function(response) {
        if (response.code == 0) {
          if (!!response.data.borrowData){
            $this.VIP.borrowId = response.data.borrowData.borrowId
            $this.VIP.borrowName = response.data.borrowData.borrowName
            $this.VIP.apr = response.data.borrowData.apr
            $this.VIP.lowestAccount = response.data.borrowData.lowestAccount
            $this.VIP.validTime = response.data.borrowData.validTime
            $this.VIP.percent = response.data.borrowData.percent
            $this.VIP.type = response.data.borrowData.type
            $this.VIP.isDay = response.data.borrowData.isDay
            $this.VIP.isActivity = response.data.borrowData.isActivity
            $this.VIP.activityName = response.data.borrowData.activityName
            $this.VIP.israiserates = response.data.borrowData.israiserates
            $this.VIP.raiserates = response.data.borrowData.raiserates
            $this.VIP.avaiableAccount = response.data.borrowData.avaiableAccount
          } else {
            $this.VIPFlag = false
          }
        } else if (response.code == 1) {
          $this.VIPFlag = false
        }
      })
    },
    onReachBottom() {

    },
    onPullDownRefreash(){

    }
}
</script>

<style lang="less" scoped>
  .noticetitle {
    font-size: 0;
    padding: .3rem 0 .3rem .25rem;
    background: #fff;
    border-bottom:1px solid #e6e6e6;
    i {
      display: inline-block;
      width: .33rem;
      height: .33rem;
      background: url(../../../static/assets/noticetitle.png) no-repeat 50% 50%;
      background-size: contain;
    }
    div {
      overflow: hidden;
      display: inline-block;
      width: 5.5rem;
      height: .33rem;
      margin-left: .22rem;
      padding-left: .3rem;
      margin-top: 0;
       .notice{
          width: 100%;
          height: .33rem;
          .noticeSlide{
            height: .33rem;
            width: 100%;
            font-size: .26rem;
            color: #6a6a6a;
            line-height: .33rem;
          }
      }
    }
  }
  .recommended {
    margin: 0 0 .2rem 0;
    text-align: center;
    font-size: 0;
    background: #fff;
    .wapper {
      display: inline-block;
      width: 1.8rem;
      .recommended-img {
        padding: .4rem 0 .25rem 0;
        text-align: center;
        img {
          width: .77rem;
          height: .77rem;
        }
      }
      .recommended-text {
        text-align: center;
        font-size: .28rem;
        color: #060606;
        padding-bottom: .48rem;
      }
    }
  }
  .VIP {
    height: 3rem;
    background: #fff;
    font-size: 0;
    padding-left: .33rem;
    .wapper {
      display: inline-block;
      width: 6.8rem;
      position: relative;
      .VIPshow {
        display: inline-block;
        height: .46rem;
        width: 1.1rem;
        background: url(../../../static/assets/noobVIP1.png) no-repeat 50% 50%;
        background-size: 100%;
      }
      .HOTshow {
        display: inline-block;
        height: .46rem;
        width: 1.1rem;
        background: url(../../../static/assets/hot.png) no-repeat 50% 50%;
        background-size: 100%;
      }
      .VIPtitle {
        font-size: .36rem;
        color: #4b4b4b;
        height: 1.3rem;
        line-height: 1.3rem;
        i{
          margin: -10px 0 -10px 7px;
        }
      }
      .VIPInfo{
        overflow: hidden;
        .VIPperce {
          float: left;
          color: #ed7900;
          position: relative;
          div{
            font-size: 1rem;
            font-weight: bold;
            line-height: 1rem;
            span {
              font-size: .36rem;
              font-weight: normal;
            }
          }
          .txt{
            position: absolute;
            width:1.50rem;
            left:.2rem;
            bottom: -.15rem;
            font-size:.24rem;
            font-weight:normal;
            color:#a6a6a6;
          }
          i{
            font-size: .36rem;
            font-weight: normal;
            font-style: inherit;
            position: absolute;
            left:2.2rem;
            top:0.2rem;
          }

        }
        .VIPnotice {
          float: right;
          width:50%;
          border-left: 1px solid #ccc;
          margin-top: .11rem;
          span {
            display: block;
            font-size: .24rem;
            color: #999;
            height:.42rem;
            line-height: .42rem;
            text-indent: 1rem;
            &.sp-1 {
              background:url(../../../static/assets/VIPnotice-1.png) no-repeat .61rem 50%;
              background-size: .3rem .3rem;
            }
            &.sp-2{
              background:url(../../../static/assets/VIPnotice-2.png) no-repeat .62rem 50%;
              background-size: .3rem .3rem;
            }
            &.sp-3 {
              background:url(../../../static/assets/VIPnotice-3.png) no-repeat .61rem 50%;
              background-size: .3rem .3rem;
            }
          }
        }
      }
      .VIPbtn {
        a {
          width: 1.4rem;
          height: .4rem;
          line-height: .4rem;
          border-radius: 4px;
          color: #f38a00;
          font-size: .24rem;
          display: inline-block;
          border:1px solid #f38a00;
          position: absolute;
          top:.48rem;
          right:0rem;
          text-align: center;
        }
      }
    }
  }
  .popUpWarp {
    position: fixed;
    top:0;
    width: 100%;
    height: 100%;
    background: rgba(150,150,150,0.3);
    z-index: 9999;
    max-width: 980px;
    .popUpLayer {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -2.4rem;
      margin-top: -3rem;
      width: 4.8rem;
      height: 6rem;
      text-align: center;
      img{
        width: 100%;
      }
      .btn {
        position: absolute;
        top: 5rem;
        left: .6rem;
        width: 3.4rem;
        height: .6rem;
        line-height: .6rem;
        border-radius: .375rem;
        background: rgb(254,117,51);
        color:white;
        font-size: .3rem;
      }
      div{
        margin: 0 auto;
        width: .5rem;
        height: .5rem;
        img{
          display: block;
        }
      }
    }
  }
  .advertising{
    width: 100%;
    margin-top: .2rem;
    img{
      width:100%;
      height: 1.5rem;
    }
  }
  .biaoContent {
    padding: 0.2rem 0;
    font-size: 0;
    >div {
      width: 33.33%;
      display: inline-block;
      i {
        display: inline-block;
        width: .46rem;
        height: .44rem;
        margin-left: .18rem;
        vertical-align: middle;
      }
      >div {
        display: inline-block;
        width: 1.6rem;
        height: .44rem;
        vertical-align: middle;
        line-height: .44rem;
        margin-left: .2rem;
        div {
          font-size: .24rem;
          color: #adb2b7;
        }
      }
    }
    .fang {
      i {
        background: url(../../../static/assets/fang.png) no-repeat 50% 50%;
        background-size: 100%;
      }
    }
    .cir {
      i {
        background: url(../../../static/assets/cir.png) no-repeat 50% 50%;
        background-size: 100%;
      }
    }
    .ju {
      i {
        background: url(../../../static/assets/ju.png) no-repeat 50% 50%;
        background-size: 100%;
      }
    }
  }
</style>
